<template>
  <div class="menu">
    <ProTable
        @add="add"
        :tableSource="tableData"
        :columns="columns"
        :pagination="false"
        @onload="getList"
    >
      <template #bodyCell="{record,column}">

        <!-- <template v-if="column.dataIndex === 'type'">
          {{  getDisableValue(typeMenu,String(record[column.dataIndex])) }}
        </template> -->

        <template v-if="column.dataIndex === 'operation'">
          <ProButton
              type="link"
              :options="$format.btn_del($format.btn_disabled(['add','edit','enable','disable','delete'],record.disabled),record)"
              :cancel="table_cancel"
              :finished="(status)=>finished(status,record)"></ProButton>
        </template>

       <template v-else>
          {{ $format.str(record[column.dataIndex]) }}
        </template>

      </template>
    </ProTable>

    <pro-modal v-model="visable" :title="is_add?'新增':'编辑'" @close="modal_cancel">
      <a-row class="pl-2">
        <a-col :span="6" class="text-right pr-1">父级:</a-col>
        <a-col :span="14" class="pl-1">{{ edit_info ? $format.str(edit_info.p_name) : '-' }}</a-col>
      </a-row>
      <ProForm ref="lgformRef" :initParam="{}" :configure="configure"  v-bind="formOptions"></ProForm>
      <template #footer>
        <ProButton type="primary" :options="['submit','close']" :cancel="modal_cancel" :finished="modal_finished"></ProButton>
      </template>
    </pro-modal>

  </div>
</template>

<script setup lang="ts">
import type { FormProps } from "@/components/ProForm";
import ProForm from "@/components/ProForm";
import type { TableProps } from "@/components/ProTable";
import ProTable from "@/components/ProTable";

import fetchApi from "@/api/system/menu";
import { buttonType } from "@/components/ProButton/interface";
import { get } from "lodash";
import { getCurrentInstance, nextTick, ref } from "vue";
// import { useI18n } from "vue-i18n";

const { proxy }:any = getCurrentInstance();
// const globalStore = GlobalStore()
// const { locale } = useI18n({inheritLocale: true,useScope: 'local'})

const tableData = ref();

  const disabledList = [
    {
      label:"禁用",
      value:"1",
      locale:{
        ch:"禁用",
        en:"disabled"
      }
    },
    {label:"启用",
      value:"0",
      locale:{
        ch:"启用",
        en:"enable"
      }
    }]

  const typeMenu = [
      {
        label:"目录",
        value:'1',
        locale:{
          ch:"目录",
          en:"directory"
        }
      },
      {
        label:"菜单",
        value:'2',
        locale:{
          ch:"菜单",
          en:"menu"
        }
      },
      {
        label:"按钮",
        value:'3',
        locale:{
        ch:"按钮",
        en:"button"
        }
      }]

  const columns:TableProps['columns'] = [
    {
      dataIndex:"name",
      title: "名称",
    },
    {
      dataIndex:"path",
      title: "链接",
    },
    {
      dataIndex:"icon",
      title: "图标",
    },
    {
      dataIndex:"type",
      title: "类型",
      dic:typeMenu
    },
    {
      dataIndex: "disabled",
      title: "状态",
      searchType: "select",
      enum: disabledList,
      dic:disabledList
    },
    {
      dataIndex:"sort",
      title: "排序",
    },
    {
      width:270,
      dataIndex:"operation",
      title:"操作"
    }
  ]

const configure:FormProps['configure'] = [
  {"type":"select","label":"类型","span":24,"prop":"type","searchInitParam":1,"enum":[{"label":"目录","value":1},{"label":"菜单","value":2},{"label":"按钮","value":3}],"searchProps":{"disabled":false,"readonly":false,"required":false},"rules":[{"required":false,"trigger":["change","blur"]}]},
  {"type":"text","label":"名称","span":24,"prop":"name","searchInitParam":"","enum":[],"searchProps":{"disabled":false,"readonly":false,"required":true,"max":100},"rules":[{"type":"string","required":true,"max":100,"min":1,"message":"请输入1-100个字符","trigger":["change","blur"]}]},
  {"type":"text","label":"链接","span":24,"prop":"path","searchInitParam":"","enum":[],"searchProps":{"disabled":false,"readonly":false,"required":true,"max":100},"rules":[{"type":"string","required":true,"max":100,"min":1,"message":"请输入1-100个字符","trigger":["change","blur"]}]},
  {"type":"text","label":"图标","span":24,"prop":"icon","searchInitParam":"","enum":[],"searchProps":{"disabled":false,"readonly":false,"required":false,"max":100},"rules":[{"type":"string","required":false,"max":100,"min":1,"message":"请输入1-100个字符","trigger":["change","blur"]}]},
  {"type":"text","label":"权限","span":24,"prop":"perms","searchInitParam":"","enum":[],"searchProps":{"disabled":false,"readonly":false,"required":true,"max":100},"rules":[{"type":"string","required":true,"max":100,"min":1,"message":"请输入1-100个字符","trigger":["change","blur"]}]},
  {"type":"textarea","label":"附加权限","span":24,"prop":"addit_perms","searchInitParam":"","enum":[],"searchProps":{"disabled":false,"readonly":false,"required":true,"max":2000},"rules":[{"type":"string","required":false,"max":2000,"min":1,"message":"请输入1-2000个字符","trigger":["change","blur"]}]},
  {"type":"textarea","label":"描述信息","span":24,"prop":"remark","searchInitParam":"","enum":[],"searchProps":{"disabled":false,"readonly":false,"required":false,"max":200},"rules":[{"type":"string","required":false,"max":200,"min":1,"message":"请输入1-200个字符","trigger":["change","blur"]}]},
  {"type":"number","label":"排序","span":24,"prop":"sort","searchInitParam":0,"enum":[],"searchProps":{"disabled":false,"readonly":false,"required":true,"max":100,"min":0},"rules":[{"type":"number","required":true,"max":100,"min":0,"message":"请输入0-100之间数字","trigger":["change","blur"]}]}]

const formOptions = {showButton:false,layout:[6,14],colNum:1}

const visable = ref(false);
const lgformRef = ref();
const edit_info = ref<null|any>(null);
const is_add = ref(true);

  // 新增菜单弹窗
  const add = ()=>{
    visable.value = true
  }

  // 获取菜单列表
  const getList = async ()=>{
    const {code,data} = await fetchApi.sysMenuList()
    if(code === 200){
      tableData.value = data
    }
  }

  // 转换中英文
  // const getDisableValue = (list:any,value:any)=>{
  //   const item = chain(list).find(['value',value]).value()
  //   if(item && item.locale){
  //     return item.locale[locale.value as "en" | "ch"]
  //   }
  //   return item && item.label ? item.label : '-'
  // }


  const table_cancel = ()=>{
    alert("取消")
  }
  // 表格点击方法
  const finished = async (status:buttonType,item:any) =>{
    if(['add','edit','view'].includes(status)) visable.value = true

    if(status === 'edit'){
      is_add.value = false
      await nextTick();
      edit_info.value = {id:item.id,pid:item.pid,p_name:item.p_name}
      lgformRef.value.updateFormByKey('type',item.type)
      lgformRef.value.updateFormByKey('name',item.name)
      lgformRef.value.updateFormByKey('path',item.path)
      lgformRef.value.updateFormByKey('icon',item.icon)
      lgformRef.value.updateFormByKey('perms',item.perms)
      lgformRef.value.updateFormByKey('addit_perms',item.addit_perms)
      lgformRef.value.updateFormByKey('remark',item.remark)
      lgformRef.value.updateFormByKey('sort',item.sort)
    }

    if(status === 'add') {
      is_add.value = true
      edit_info.value = {pid:item.id,p_name:item.name}
    }

    if(['disable','enable'].includes(status)){
      return  await table_disable(item,status)
    }

    if(status === 'delete'){
      return await table_delete(item)
    }
    return Promise.resolve()
  }

  const modal_cancel = ()=>{
    visable.value = false
    lgformRef.value.resetForm()
    edit_info.value = null
    is_add.value = true
  }

  // 弹窗点击事件
  const modal_finished = async (status:buttonType)=> {
    switch (status){
      case "submit":
        return await modal_submit();
    }
  }

  // 提交
  const modal_submit = async ()=>{
    try {
      const data = await lgformRef.value.validate()
      if(!data) return false
      let res;
      if(is_add.value) res = await fetchApi.sysAddMenu({...data,pid:get(edit_info.value,'pid',0)});
      if(!is_add.value) res = await fetchApi.sysUpdateMenu({...data,id:edit_info.value.id,pid:edit_info.value.pid});

      proxy.$format.response(res)
      await getList()
      await modal_cancel()
    }catch (e) {
      console.log("提交",e)
    }
  }

  // 启用禁用
  const table_disable = async (item:any,status:buttonType)=>{
    const res = await fetchApi.DisabledMenu({id:item.id,disabled: status === 'disable' ? 1 : 0})
    proxy.$format.response(res)
    await getList()
  }

  // 删除
const table_delete = async (item:any)=>{
  const res = await fetchApi.DeletedMenu({id:item.id})
  proxy.$format.response(res)
  await getList()
}


</script>

<style scoped lang="less">

</style>
